<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0px;
            font-family: 微软雅黑;
        }

        /*头部样式*/
        #head {
            background-color: white;
            height: 120px;
            position: relative;
        }

        #head a {
            text-decoration: none;
        }

        #head_title {
            font-size: 32px;
            position: absolute;
            margin: 42px 40px;
            font-weight: bold;

        }

        #head_title a {
            color: #076ce0;
        }

        #head_menu {
            font-size: 16px;
            position: absolute;
            right: 103px;
            top: 51px;
        }

        #head_menu a {
            color: black;

        }

        #head_menu > div {
            float: left;
            margin: 0 20px;
        }

        /*图片*/
        #img {
            height: 300px;
            /* 设置背景图片 */
            background-image: url("../front/image/newsCenter/01.jpg");
            /* 设置图片尺寸: 宽 高  */
            background-size: 140% 300px;
            /* 禁止重复 */
            background-repeat: no-repeat;
        }

        /*选项*/
        #body_menu {
            height: 95px;
            padding: 32px 40px 0px 39px;
        }

        #body_menu > div {
            width: 130px;
            height: 44px;
            text-align: center;
            transition-duration: 0.5s; /*设置动画持续时间*/
        }

        #body_menu > div {
            float: left;
            margin-right: 21px;
        }

        #body_menu > div > span {
            line-height: 44px;
            color: white;
        }

        /*正文*/
        .content{
            padding: 0 40px;
        }
        .content_d1{
            font-size: 25px;
            margin-top: 20px;
        }
        .content_d2{
            font-size: 13px;
            color: #666666;
            margin: 0 0 40px 0;
        }
        .content_s1{
            font-size: 14px;
            color: #676767;
        }
        .content_link{
            position: relative;
            height: 170px;
        }
        .content_link_d1{
            position: absolute;
        }
        .content_link_d1>div>span{
            font-size: 14px;
            color: #676767;

        }
        .content_link_d1>div>span>a{
            text-decoration: none;
            color: #676767;
        }
        .content_link_d1>div{
            margin: 40px 0 0 0;
        }
        .content_link_d2{
            position: absolute;
            right: 250px;
            top: 55px;
            font-size: 14px;
        }

        #tail_phone>p{
            margin: 5px;
        }
        #tail_last{
            height: 21px;
            background-color: rgba(23,23,23,0.9);
            color: rgb(153, 153, 153);
            padding: 30px 30px;

        }
        #tail_last>span>a{
            text-decoration: none;
            color: rgb(153, 153, 153);
            font-size: 14px;
        }
        /*锚点 回到顶部*/
        #back_top{
            width: 42px;
            height: 42px;
            position: fixed;/*固定定位*/
            bottom: 55px;
            right: 65px;
            display: none;
        }
    </style>
</head>
<body>
<a href="" id="top1"></a>
<div id="contentApp">
    <div id="head">
        <div id="head_title">
            <a href="index">{{aboutUs.name}}</a>
        </div>
        <div id="head_menu">
            <div><a href="./index">首页</a></div>
            <div><a href="./breSources">业务资源</a></div>
            <div><a href="./keyServices" style="color: #076ce0">特色服务</a></div>
            <div><a href="./newsCenter">新闻中心</a></div>
            <div><a href="./aboutUs">关于我们</a></div>
        </div>
    </div>
    <div id="img"></div>
    <div class="content" >
        <div>
            <p class="content_d1" v-text="keyServiceVo.name">外墙清洗</p>
        </div>
        <div>
            <p class="content_d2">发表时间：{{keyServiceVo.createdtime}}</p>
        </div>
        <div>
            <hr style="border: none;border-top:1px dashed #ccc;margin-bottom: 20px">
        </div>
        <div>
            <span class="content_s1" v-text="keyServiceVo.content">
                外墙清洗分为吊板方式和擦窗方式。吊板方式是用吊绳、吊板将人吊到工作位置进行清洗。这种型式比较简单，成本也低，只要工人身体素质好、绳子连接牢固就可以进行。
一般的大楼都可以用这种方式进行清洗，但是这种方式的操作必须使安全措施到位，否则危险性很大，造成伤亡事故的都是因安全措施不到位造成的。 </span>
        </div>
        <div>
            <hr style="border: none;border-top:1px dashed #ccc;margin-top: 40px">
        </div>
        <div class="content_link">
            <div class="content_link_d1">
                <div>
                    <span>上一篇</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span><a :href="'/service?name='+keyServiceVo.prevName" v-text="keyServiceVo.prevName">开荒保洁</a></span>
                </div>
                <div>
                    <span>下一篇</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span><a :href="'/service?name='+keyServiceVo.nextName" v-text="keyServiceVo.nextName">更好化解物业矛盾还是需业主于物业之间的彼此体谅</a></span>
                </div>
            </div>
            <div class="content_link_d2">
                分享到:
                <a href=""><img src="" alt=""></a>
            </div>

        </div>
    </div>
    <div id="tail_last">
        <span><a href="/admin">登录管理</a></span>
    </div>
    <div id="back_top">
        <img src="../front/image/aboutUs/04.png" alt="">
    </div>
</div>
</body>
<!--引入axios框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!--引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入JQuery框架-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    let v = new Vue({
        el: "#contentApp",
        data: {
            keyServiceVo:{},
            aboutUs: {}
        },
        methods: {

        },
        created:function () {
            let name = location.search;
            axios({
                url:"/f-keyservices/getServiceVo"+name,
                method:"get",
            }).then(function (response) {
                console.log(response);
                v.keyServiceVo = response.data;
            });

            axios({
                url:"/f-infocompany/aboutUs",
                method:"get"
            }).then(function (response) {
                v.aboutUs = response.data;

            })

        },

    })
    /*回到顶部*/
    $(function(){
        $(window).scroll(function(){  //只要窗口滚动,就触发下面代码
            var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
            if( scrollt >50 ){  //判断滚动后高度超过200px,就显示
                $("#back_top").slideDown(500); //淡入
            }else{
                $("#back_top").stop().slideUp(500); //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动
            }
        });
        $("#back_top").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
            $("html,body").animate({scrollTop:"0px"},200);
        });
    });
</script>
</html>